CSCI N241: Table Talk for Super Heros

LEARNING MODULE: Tables

Activity: Exploring the Presentation of Tabular Data

By the end of this lab you should understand ...

 

Lab Directions

  1. For this lab, you'll create a scheduling grid that depicts your super hero's weekly schedule. Include categories for meeting, work, training, being super, personal time, etc. NOTE: Your lab need not reflect an actual schedule of a super hero - be creative. Use your imagination! Be sure to keep your super hero's logo colors and special traits in mind.

     
  2. Open a programmer's text editor (like syn Text Editor, Notepad++ or jEdit). Create an HTML document called tabletalk.html and should be saved in your hero directory. Use the following guidelines for your page:
    • Create your page using the DOCTYPE declaration for XHTML 1.0 Strict.
    • The first row should indicate the days of the week and it should use <th> to create the cells.
    • The first column should indicate hour-long segments (i.e. - "8:00A-9:00A", "9:00A-10:00A", etc.) and it should use <th> to create the cells.
    • Include a variety of rowspans for activities lasting more than one hour (you need at least three rowspans).
    • Include at least one colspan
    • Include a <caption> for your table.
    • Specify a table summary in the <table> tag.
    • Edit your exisiting hero.css and use it an external style sheet keeping the name hero.css for your styles.
    • In your style sheet, specify a variety of background colors that coordinate with your hero's logo colors to represent different activities in your weekly schedule.
    • Additionally, specify border style for the <table>, <td> and/or <th>.  
    • Your table should include at least one hover element from the examples given at Smashing Magazine .


  3. Add comments to your html code describing how the tags relating to tables work (do not add comments in before the <html> element or after </html>). In addition, add a documentation comment nested in the <head> element.Also add comments to your css script explaining the add pieces to display the look of your table.

     
  4. Validate your page & CSS file using the W3C Validators (do not post pages that are not validated).

    See the following URL in order to validate your XHTML code:
    http://validator.w3.org/

    See the following URL in order to validate your CSS code:
    http://jigsaw.w3.org/css-validator/

     
  5. Use File Transfer Protocol (FTP) or Cyberduck (if you are using a MAC at home)to post your lab work.

     
  6. Add links for your table lab and its CSS file  to your class index page.


  7. For extra credit add navigation links to for navigation between your both the index.html and your tabletalk.html that are inside your hero folder.